<template>
  <div class="switch" :style="{ fontSize: size + 'px' }" @click="flag = !flag">
    <span class="pot" :style="getCss"></span>
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "update:value",
  },
  props: {
    size: {
      type: Number,
      default: 20,
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  // data() {
  //   return {
  //     flag: false,
  //   };
  // },
  computed: {
    flag: {
      get() {
        return this.value;
      },
      set(nv) {
        this.$emit("update:value", nv);
      },
    },
    getCss() {
      if (this.flag) {
        return {
          left: "1em",
          backgroundColor: "green",
        };
      } else {
        return {
          left: "0em",
          backgroundColor: "red",
        };
      }
    },
  },
};
</script>

<style scoped>
.switch {
  display: inline-block;
  width: 2em;
  height: 1em;
  background-color: #dedede;
  /* border-radius: 1em; */
  /* 圆角的值如果远远大于元素的宽度和高度，会自动以半圆进行元素圆角设置 */
  border-radius: 100000px;
  position: relative;
  box-shadow: 0 0 6px 0 #333 inset;
  cursor: pointer;
}
.pot {
  display: inline-block;
  width: 1em;
  height: 1em;
  /* background-color: white; */
  border-radius: 50%;
  position: absolute;
  top: 0px;
  transform: scale(0.8);
  transition: all 0.5s ease;
}
</style>
